<!--
 * @Descripttion: 
 * @version: 
 * @Author: Connor
 * @Date: 2021-03-12 16:04:54
 * @LastEditors: Ken
 * @LastEditTime: 2021-03-25 17:44:20
-->
<template>
  <div class="padding" v-loading="loading">
    <el-card>
      <div slot="header" class="clearfix">
        <span>客户数据分析表-快递</span>
      </div>
      <el-form
        v-model="searchForm"
        size="mini"
        label-width="80px"
        class="flex justify-between"
        ref="searchForm"
      >
        <el-form-item prop="instockTimeRange" label="入库时间">
          <el-date-picker
            v-model="searchForm.instockTimeRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item prop="shippingWay">
          <div slot="label">渠道</div>
          <el-select
            v-model="searchForm.shippingWay"
            filterable
            placeholder="默认选择全部"
          >
            <el-option
              v-for="(item, value) in salePerformanceVo.shippingWayMap"
              :key="value"
              :label="item"
              :value="value"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="saleUserGroupId">
          <div slot="label">部门</div>
          <el-select
            v-model="searchForm.saleUserGroupId"
            multiple
            filterable
            placeholder="默认选择全部"
          >
            <el-option
              v-for="(item, value) in salePerformanceVo.saleGroupMap"
              :key="value"
              :label="item"
              :value="parseInt(value)"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="topCount">
          <div slot="label">TOP</div>
          <el-select
            v-model="searchForm.topCount"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, value) in salePerformanceVo.topCountMap"
              :key="value"
              :label="item"
              :value="value"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="type" label="类型">
          <el-select v-model="searchForm.type" filterable placeholder="请选择">
            <el-option
              v-for="(item, value) in salePerformanceVo.typeMap"
              :key="value"
              :label="item"
              :value="value"
            />
          </el-select>
        </el-form-item>

        <el-button size="mini" type="primary" @click="statistics('searchForm')"
          >统计</el-button
        >
      </el-form>
    </el-card>
    <el-card class="margin-top">
      <el-table :data="tableData" style="width:100%" class="text-sm">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column
          :fit-header="true"
          :auto-fit="true"
          v-for="(item, index) in tableHead"
          :key="index"
          :label="item.label"
          :prop="item.prop"
        >
          <template slot-scope="scope">
            <template v-if="item.prop.indexOf('-') > -1">
              <template v-for="d in scope.row.customerTurnoverMonthDatas">
                <div v-if="d.month === item.prop" :key="d.length">
                  {{ Math.round((d.totalCost * 100) / 10000) / 100 }}
                </div>
              </template>
            </template>
            <div v-else-if="item.prop === 'totalCost'">
              {{ Math.round((scope.row.totalCost * 100) / 10000) / 100 }}
            </div>
            <template v-else>
              {{ scope.row[item.prop] }}
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";

export default {
  props: ["data"],
  data() {
    return {
      id: "",
      row: "",
      searchForm: {
        instockTimeRange: "",
        shippingWay: "4",
        saleUserGroupId: "",
        topCount: "2",
        type: "1"
      },
      loading: false,
      tableData: [],
      salePerformanceVo: {
        typeMap: {
          1: "营业额",
          2: "利润",
          3: "利润率",
          4: "成本"
        },
        shippingWayMap: {
          4: "快递"
        },
        saleGroupMap: {},
        topCountMap: { 1: "全部", 2: "50", 3: "100" }
      },
      tableHead: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let res = await ajax("initData", {});
      console.log(res);
      this.salePerformanceVo.saleGroupMap = res.data3;
    },
    async statistics() {
      if (!this.searchForm.instockTimeRange) {
        return this.$message.error("请选择入库时间!");
      } else if (!this.searchForm.type) {
        return this.$message.error("请选择类型");
      }
      this.loading = true;
      let startInStockTime = this.searchForm.instockTimeRange[0];
      let endInStockTime = this.searchForm.instockTimeRange[1];
      const { data } = await ajax("queryCustomerDataAnalysisTotalResult", {
        statisticsType: this.searchForm.type,
        channelType: this.searchForm.shippingWay,
        topCount: this.searchForm.topCount,
        startInStockTime: startInStockTime,
        endInStockTime: endInStockTime
      });
      let anotherTableHead = [
        {
          label: "客户简称",
          prop: "customerName"
        },
        {
          label: "销售",
          prop: "saleName"
        },
        {
          label: "部门",
          prop: "department"
        },
        {
          label: "总业绩(单位:万)",
          prop: "totalCost"
        }
      ];
      let monthTitles = [];
      let startDate = new Date(this.searchForm.instockTimeRange[0]);
      let startYear = startDate.getFullYear();
      let startMonth = startDate.getMonth() + 1;

      let endDate = new Date(this.searchForm.instockTimeRange[1]);
      let endYear = endDate.getFullYear();
      let endMonth = endDate.getMonth() + 1;
      let diff = endYear - startYear;
      if (diff == 0) {
        for (let i = startMonth; i <= endMonth; i++) {
          let monthTitle = startYear + "-" + (i < 10 ? "0" + i : i);
          monthTitles.push(monthTitle);
        }
      } else if (diff == 1) {
        // 相差一年
        for (let i = startMonth; i <= 12; i++) {
          let monthTitle = startYear + "-" + (i < 10 ? "0" + i : i);
          monthTitles.push(monthTitle);
        }
        for (let i = 1; i <= endMonth; i++) {
          let monthTitle = endYear + "-" + (i < 10 ? "0" + i : i);
          monthTitles.push(monthTitle);
        }
      } else if (diff > 1) {
        for (let i = startMonth; i <= 12; i++) {
          let monthTitle = startYear + "-" + (i < 10 ? "0" + i : i);
          monthTitles.push(monthTitle);
        }
        for (let i = 1; i < diff; i++) {
          let diffYear = startYear + i;
          for (let j = 1; j <= 12; j++) {
            let diffMonth = j < 10 ? "0" + j : j;
            let monthTitle = diffYear + "-" + diffMonth;
            monthTitles.push(monthTitle);
          }
        }
        for (let i = 1; i <= endMonth; i++) {
          let monthTitle = endYear + "-" + (i < 10 ? "0" + i : i);
          monthTitles.push(monthTitle);
        }
      } else {
        this.$message.error("请先选择入库时间!");
        return;
      }

      let col = [];
      for (let i of monthTitles) {
        col.push({
          prop: i,
          label: i
        });
      }
      this.tableHead = [...anotherTableHead, ...col];
      this.tableData = data.turnover;
      this.loading = false;
    }
  }
};
</script>
